<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<style>
    .dialog {
        border: 1px red solid;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 100px;
        top: 100px;
    }

     .arrow_b, .arrow_a {
			 border: 10px solid red;
			 border-color: red transparent transparent transparent;
			 /*ie6 透明*/
			 border-style:solid dashed dashed dashed;
			 position: absolute;
			 width: 0;
			 height: 0;
			 font-size: 0;
			 /*窗口居中*/
			 left: 50%;
			 top: 100%;
 			}

		 .arrow_a {
			 border-top-color: white;
			 /*覆盖 b*/
			 top: -11px;
			 left: -10px;
		 }


</style>
<body class="yui3-skin-sam  yui-skin-sam">

<div class="dialog">
    <div class="arrow_b">
        <div class="arrow_a">
        </div>
    </div>
</div>


<div>
    <label for="horiz_value">
        放大倍数：
        <input id="horiz_value" readonly style="border:none;"/>

    </label>
    <p>
        <span class="horiz_slider"></span>
    </p>
</div>
<script src="../../base/javascript/kissy.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script>
    var S = KISSY,
            d = S.one(".dialog"),
            b = S.one(".arrow_b"),
            a = S.one(".arrow_a"),
            base = 1000;
    YUI().use("slider", function (Y) {
        var xSlider = new Y.Slider({
            value: 10
        });
        xSlider.render('.horiz_slider');
        xSlider.after("valueChange", function (e) {
            var z = e.newVal / 100,v = z * base;
            console.log(v);
            d.css({
                width:v,
                height:v
            });
            var bw = v / 10;
            S.DOM.css([a[0],b[0]], {
                "border-width":bw
            });
            a.css({
                left:0 - bw,
                top:-1 - bw
            });


        });
        // Link the input value to the Slider
        var xInput = Y.one("#horiz_value");
        xInput.setData({
            slider: xSlider
        });
        xInput.set("value", 10);
        // Pass the input as the 'this' object inside updateInput
        xSlider.after("valueChange", updateInput, xInput);
        function updateInput(e) {
            this.set("value", e.newVal);
        }
    });
</script>
</body>
</html>